import { Button, Form, Input, Modal, Select, Space } from 'antd';
import { useCallback, useEffect } from 'react';
import type { Response } from 'umi';

import type { IRoleGroup } from '@/types/permission/role';

const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};

/**
 * 授权组编辑
 * @param param0
 * @returns
 */
export default function Modifier({
  visible,
  onOk,
  dataSource,
  onCancel,
  roleOptions,
}: {
  visible?: boolean;
  dataSource?: IRoleGroup;
  onOk?: (vals: {
    id?: string;
    groupCode?: string;
    groupName: string;
    roleIdList: string[];
    remake?: string;
  }) => Promise<Response<boolean>>;
  onCancel?: () => void;
  roleOptions: { label: string; value: string }[];
}) {
  const [form] = Form.useForm();

  useEffect(() => {
    if (visible) {
      if (dataSource?.id)
        form.setFieldsValue({
          id: dataSource?.id,
          groupName: dataSource?.groupName,
          roleIdList: dataSource?.roleIdList,
          remake: dataSource?.remake,
        });
    } else {
      form.resetFields();
    }
  }, [visible, dataSource]);

  const handleOk = useCallback(() => {
    form.validateFields().then((vals: { groupName: string; roleIdList: string[] }) => {
      onOk?.({
        id: dataSource?.id ?? undefined,
        groupCode: dataSource?.groupCode ?? undefined,
        ...vals,
      }).then((res) => {
        if (res?.success) onCancel?.();
      });
    });
  }, [onOk, dataSource, onCancel]);

  return (
    <Modal
      onCancel={onCancel}
      open={visible}
      title={dataSource?.id ? '编辑授权组' : '新增授权组'}
      footer={
        <Space>
          <Button onClick={onCancel}>取消</Button>
          <Button type="primary" onClick={handleOk}>
            保存
          </Button>
        </Space>
      }
    >
      <Form form={form} {...layout} layout="horizontal">
        {dataSource?.id ? (
          <Form.Item name="id" label="授权组ID">
            <Input style={{ width: '100%' }} placeholder="系统自动获取" disabled />
          </Form.Item>
        ) : null}
        <Form.Item
          name="groupName"
          label="授权组名称"
          rules={[
            {
              required: true,
              message: '请输入授权组名称',
            },
          ]}
        >
          <Input style={{ width: '100%' }} placeholder="请输入授权组名称" />
        </Form.Item>
        <Form.Item
          name="roleIdList"
          label="授权角色"
          rules={[
            {
              required: true,
              message: '请选择授权角色',
            },
          ]}
        >
          <Select
            style={{ width: '100%' }}
            placeholder="请选择授权角色"
            mode="multiple"
            options={roleOptions ?? []}
          />
        </Form.Item>
        <Form.Item
          name="remake"
          label="授权组描述"
          rules={[
            {
              required: true,
              message: '请输入授权组描述',
            },
          ]}
        >
          <Input.TextArea
            maxLength={300}
            style={{ width: '100%' }}
            placeholder="请输入授权组名称"
          />
        </Form.Item>
      </Form>
    </Modal>
  );
}
